<template>
  <div class="category_page footer-page">
    <div class="top_tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.cate_name" :name="item.id + ''" />
      </el-tabs>
      <el-link v-if="tabList.length > 0 && $hasMethod('#add')" href="/webConfig/category" :underline="false" type="primary">添加品类</el-link>
    </div>
    <div class="flex tab_content">
      <div class="img_wrapper">
        <el-image :src="require('../../../assets/images/demo_cate.jpg')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <div class="config_wrapper">
        <div v-if="!$hasMethod('#edit')" class="mask" />
        <h5>{{ configTitle }}</h5>
        <div class="main">
          <div class="warn-box">
            <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
            <p><span>图片要求！</span><br>商品图片要求PNG格式透明底图片；图片尺寸要求500×500px；</p>
          </div>
          <div class="pos_list">
            <div v-for="(item, index) in dataList" :key="index" class="pos_item">
              <div class="flex flex-between-center title">
                <span>推荐位{{ index + 1 }}</span>
                <p v-if="$hasMethod('#edit')">
                  <span class="pointer" @click="upSortPos(index)"><i class="el-icon-top" /></span>
                  <span class="pointer" @click="downSortPos(index)"><i class="el-icon-bottom" /></span>
                  <span class="pointer" @click="deletePos(index)"><i class="el-icon-delete" /></span>
                </p>
              </div>
              <goods-form :show-tool="$hasMethod('#edit')" :form-data="item" :show-checked-tool="true" :show-subtitle="false" />
            </div>
          </div>
          <el-divider v-if="dataList.length > 0 && dataList.length < 4 && $hasMethod('#edit')" />
          <div v-if="dataList.length < 4 && $hasMethod('#edit')" class="add-div" @click="addRecommend">
            <i class="el-icon-plus" />添加推荐位({{ dataList.length }}/4)
          </div>
        </div>
      </div>
    </div>
    <div v-if="$hasMethod('#edit')" class="page-footer-btns">
      <el-button size="small" @click="reset">重置</el-button>
      <el-button size="small" type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getCategory, getCategoryGoodsById, addCategoryGoods } from '@/api/recommend'
import goodsForm from '../compoments/form'
export default {
  components: { goodsForm },
  data() {
    return {
      activeName: '',
      tabList: [],
      dataList: []
    }
  },
  computed: {
    configTitle() {
      const tab = this.tabList.find(item => item.id === this.activeName)
      return tab ? tab.cate_name : '商品推荐设置'
    }
  },
  mounted() {
    this.getTabs()
  },
  methods: {
    // 升序
    upSortPos(index) {
      if (index === 0) {
        return
      }
      const item = this.dataList[index]
      this.$set(this.dataList, index, this.dataList[index - 1])
      this.$set(this.dataList, index - 1, item)
    },
    // 降序
    downSortPos(index) {
      if (index === this.dataList.length - 1) {
        return
      }
      const item = this.dataList[index]
      this.$set(this.dataList, index, this.dataList[index + 1])
      this.$set(this.dataList, index + 1, item)
    },
    // 删除推荐位
    deletePos(index) {
      this.dataList.splice(index, 1)
    },
    // 添加推荐位
    addRecommend() {
      this.dataList.push({
        goods_name: '',
        goods_img: '',
        goods_id: null
      })
    },
    submit() {
      // 保存
      // console.log(this.activeName, this.dataList)
      for (const index in this.dataList) {
        if (!this.dataList[index].goods_name) {
          this.$message({
            message: '推荐位' + (parseInt(index) + 1) + '名称不能为空',
            type: 'warning'
          })
          return
        }
        if (!this.dataList[index].goods_img) {
          this.$message({
            message: '推荐位' + (parseInt(index) + 1) + '图片不能为空',
            type: 'warning'
          })
          return
        }
        if (!this.dataList[index].goods_id) {
          this.$message({
            message: '推荐位' + (parseInt(index) + 1) + '请绑定商品链接',
            type: 'warning'
          })
          return
        }
      }
      addCategoryGoods({
        cate_id: this.activeName,
        goods_arr: this.dataList
      }).then(res => {
        this.getGoods()
      })
    },
    reset() {
      // 重置
      this.getGoods()
    },
    handleClick(tab) {
      this.getGoods()
    },
    // 获取对应商品列表
    getGoods() {
      getCategoryGoodsById(this.activeName).then(res => {
        const list = []
        for (const item of res) {
          list.push({
            ...item,
            goodsData: {
              goods_id: item.goods_id,
              title: item.title,
              imgurl: item.imgurl,
              cate_name: item.cate_name
            }
          })
        }
        this.dataList = list
      })
    },
    // 获取tabs
    getTabs() {
      getCategory().then(res => {
        this.tabList = res
        this.activeName = this.tabList[0].id + ''
        this.getGoods()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
